import Vue from 'vue';
import Main from './Message.vue';

const MessageConstructor = Vue.extend(Main);

let instance;
const instances: any[] = [];
let seed = 1;
const Message = function(
  options: { message?: string; color?: any; icon?: any; typeClass?: any },
  color: string,
  icon: string,
  typeClass: string
) {
  options = options || {};
  if (typeof options === 'string' || typeof options === 'number') {
    options = {
      message: String(options),
      color: color,
      icon: icon,
      typeClass: typeClass
    };
  }
  const id = 'message_' + seed++;
  instance = new MessageConstructor({
    data: options
  }) as any;
  instance.id = id;
  instance.vm = instance.$mount();
  document.body.appendChild(instance.vm.$el);
  instance.vm.visible = true;
  instance.dom = instance.vm.$el;
  instance.dom.style.zIndex = 10000;
  instances.push(instance);
  return instance.vm;
};

Message.success = function(option: any) {
  Message(option, '#67c23a', 'beenhere', 'message--success');
};
Message.error = function(option: any) {
  Message(option, '#CC0033', 'mdi-backspace', 'message--error');
};

Message.close = function(id: any) {
  for (let i = 0, len = instances.length; i < len; i++) {
    if (id === instances[i].id) {
      instances.splice(i, 1);
      break;
    }
  }
};

Message.closeAll = function() {
  for (let i = instances.length - 1; i >= 0; i--) {
    instances[i].close();
  }
};

export default Message;
